<template>
    <div>
        <a-modal
        title="选择预算指标"
        :visible="visible"
        @ok="handleOk"
        @cancel="handleCancel"
        width="70%"
        :dialog-style="{ top: '50px' }"
        wrapClassName=""
        >
            <div v-if="!multipleChoice">
                    <commpVxeTable
                    :key="dataTableKey"
                    :config="dataTableConfig"
                    :columns="columnsVxe"
                    :formItem="formItem"
                    :conditionBtnRow="true"
                    :occupancyHeight="150"
                    ref="acceptanceRegistrationRef"
                    @radioChange="selectedRowKeysChange"
                    @searchEvent="searchEvent"
                    @resetEvent="resetEvent"
                    :isCanWrap="true"
                >
                </commpVxeTable>
            </div>
            <div v-else>
                <commpVxeTable
                    :key="dataTableKey"
                    :config="dataTableConfig"
                    :columns="columnsVxes"
                    :formItem="formItem"
                    :conditionBtnRow="true"
                    :occupancyHeight="150"
                    ref="acceptanceRegistrationRef"
                    @checkboxChange="checkboxChange"
                    @searchEvent="searchEvent"
                    @resetEvent="resetEvent"
                    :isCanWrap="true"
                >
                </commpVxeTable>
            </div>
        </a-modal>
    </div>
</template>
<script>
import compSelector from '@/components/compSelector/compSelector.vue'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import {jcyfybxdsaveSelectBxry,} from './service/index'
import moment from 'moment'
import assessCheckApi from './service/api'
export default {
    components:{
        compSelector,
        commpVxeTable,
    },
    props:{
        multipleChoice:{//是否多选，默认单选
            type:Boolean,
            default:()=>{
                return false
            },
            required:false,
        },
    },
    data(){
        return{
            visible:false,
            dataTableKey:null,
            formItem: [
                {
                    label: '预算项目名称',
                    model: 'fysxmmc',
                },
            ],
            columnsVxe: [
                {
                    type: 'radio',
                    width: 60,
                    fixed: 'left'
                },{
                    title: '部门',
                    field: 'fbm',
                },{
                    title: '预算项目名称',
                    field: 'fysxmmc',
                },{
                    title: '预算项目分类',
                    field: 'fbmjjflmc',
                },{
                    title: '总指标',
                    field: 'fzzb',
                },{
                    title: '指标结余',
                    field: 'fzbjy',
                },
            ],
            columnsVxes: [
                {
                    type: 'checkbox',
                    width: 60 ,
                    fixed: 'left'
                },{
                    title: '部门',
                    field: 'fbm',
                },{
                    title: '预算项目名称',
                    field: 'fysxmmc',
                },{
                    title: '预算项目分类',
                    field: 'fbmjjflmc',
                },{
                    title: '总指标',
                    field: 'fzzb',
                },{
                    title: '指标结余',
                    field: 'fzbjy',
                },
            ],
            dataTableConfig:{
                api: assessCheckApi.zzrybxdselectBmysList,
                rowId: 'id',
                urlType: true,
                paramet:{

                }
            },
            selectedRowKeysArr:[],
            idList: [],
            formState:{},
        }
    },
    watch:{

    },
    mounted(){

    },
    methods:{
        getData(row){
            this.formState = row
            this.selectedRowKeysArr = []
            this.idList = []
        },
        // 勾选
        checkboxChange(val){
            //console.log('已选择',val)
            this.idList = []
            this.selectedRowKeysArr = []
            this.selectedRowKeysArr = [...val]
            if(val.length){
                val.forEach(item => {
                    this.idList.push(item.id)
                });
            }
        },
        selectedRowKeysChange(row){
            //console.log(row)
            this.selectedRowKeysArr = []
            this.idList = []
            this.selectedRowKeysArr.push(row.newValue)
            // row.forEach(item => {
            //     this.idList.push(item.id)
            // });
            this.idList.push(row.newValue.id)
        },
        searchEvent(){
            this.selectedRowKeysArr = []
        },
        resetEvent(){
            this.selectedRowKeysArr = []
        },
        handleOk(){
            if(this.selectedRowKeysArr.length){
                this.$emit('getIndexHandle',this.selectedRowKeysArr,this.idList)
                this.visible = false
            }else{
                this.$message.warning('请先选择预算指标')
            }
        },
        handleCancel(){
            this.visible = false
        }
    }
}
</script>
<style lang="less">
</style>
